<template>
  <el-form
    ref="formValidate"
    class="rightBox"
    label-width="140px"
    :model="formData"
    @submit.native.prevent
  >
    <renders
      v-for="(element,index) in sortable_item"
      :key="index"
      :index="index"
      :ele="element.ele"
      :obj="element.obj || {}"
      :sortable-item="sortable_item"
      :config-icon="false"
      render-pattern="show"
      @clickHandler="clickHandler"
    />
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      sortable_item: []
    }
  },
  computed: {
    formData() {
      const obj = {}
      this.sortable_item.forEach(item => {
        if ('name' in item.obj) {
          obj[item.obj.name] = item.obj.value
        }
      })
      return obj
    }
  },
  mounted() {
    this.sortable_item = JSON.parse(this.$route.params.sortable_item)
    console.log(this.sortable_item)
  },
  methods: {
    clickHandler(btnName, ability) {
      if (ability === 'submit') {
        // 提交表单
        this.$refs['formValidate'].validate(valid => {
          if (valid) {
            console.log(this.formData)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else if (ability === 'reset') {
        this.$refs['formValidate'].resetFields()
        this.sortable_item.forEach(item => {
          item.obj.value = null
        })
      }
    }
  }
}
</script>
<style>
</style>
